<template>
    <footer>
        <div class="inside">
            <div class="container">
                <article class="link-list">
                    <header class="clearfix">友情链接
                        <a href="http://wpa.qq.com/msgrd?v=3&uin=125192878&site=qq&menu=yes" target="_blank">申请加入
                            <img src="/static/img/social-qq.png">
                        </a>
                    </header>
                    <aside class="friendship-link clearfix">
                        <a v-for="(item, key, index) in friendshipLinkItem" :key="index" :href="item.linkUrl" v-if="item.linkUrl" target="_blank">{{item.title}}</a>
                    </aside>
                </article>
                <article class="companyInfo">
                    <a-row>
                        <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="companyInfo-left-box">
                            <header class="clearfix">
                                <router-link to="/"><h1 class="left"><img src="/static/img/logo-white.png"></h1></router-link>
                                <ul class="left">
                                    <li>
                                        <router-link to="/Exhibition"><i class="iconfont icon-weidu"></i>最新活动</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/Exhibition"><i class="iconfont icon-weidu"></i>历届展会</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/SiteCooperation"><i class="iconfont icon-weidu"></i>网站合作</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/contactUs"><i class="iconfont icon-weidu"></i>联系我们</router-link>
                                    </li>
                                    <li>
                                        <router-link to="/Jobs"><i class="iconfont icon-weidu"></i>加入我们</router-link>
                                    </li>
                                </ul>
                            </header>
                            <p>北京总部地址：北京市东城区朝阳门银河SOHO-D座50815</p>
                            <p>上海地址：上海市静安区南京西路580号仲益大厦A2001</p>
                            <p>咨询热线：400-600-4982 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合作电话：010-88553465</p>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="companyInfo-right-box">
                            <aside>
                                <p>随时随地浏览</p>
                                <img src="/static/img/HMYS-dingyuehao.jpg" />
                                <p>订阅号</p>
                            </aside>
                            <aside>
                                <p>海量购房资讯</p>
                                <img src="/static/img/HMYS-fuwuhao.jpg" />
                                <p>服务号</p>
                            </aside>
                        </a-col>
                    </a-row>
                </article>
            </div>
            <article class="copyright">
                <p>2011-2019 华美优胜（北京）国际投资咨询有限公司 版权所有，并保留所有权利 | 京ICP备11015395号</p>
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102002557">
                    <img src="/static/img/gonganbeian.png"> 京公网安备 11010102002557号
                </a>
            </article>
        </div>
    </footer>
</template>

<script>
    export default {
        data() {
            return {
                friendshipLinkItem: null,//友情链接的数据
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取友情链接的数据
            this.getFriendshipLink();
        },
        methods: {
            // 获取友情链接的数据
            getFriendshipLink(){
                this.$get('friend/link/list/0/1/50').then(res => {
                    if(res.status == 0){
                        this.friendshipLinkItem = res.list;
                    }else{
                        console.log(res.msg);
                    }
                })
            },
        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        footer {
            background: url("/static/img/footer-bg2.jpg") no-repeat center center;
            background-size: cover;
            padding: 0 !important;
            /*margin: 80px 0 0 0;*/
            > .inside {
                background: rgba(15, 40, 54, 0.7);
                >.container{
                    padding: 30px 0px;
                    /*友情链接*/
                    > article.link-list {
                        > header {
                            width: 100%;
                            border-bottom: 1px dashed #a5a3a3;
                            font-size: 18px;
                            color: #e6e6e6;
                            text-align: left;
                            padding: 0 15px;
                            > a {
                                float: right;
                                font-size: 14px;
                                color: #e6e6e6;
                                > img {
                                    width: 1em;
                                    height: 1em;
                                    vertical-align: -0.15em;
                                    fill: currentColor;
                                    overflow: hidden;
                                }
                            }
                        }
                        > aside {
                            margin: 17px 0 0 0;
                            line-height: 25px;
                            > a {
                                float: left;
                                margin: 0 15px;
                                color: #e6e6e6;
                            }
                            > a:hover {
                                color: #00b8ee;
                            }
                        }
                    }
                    > article.companyInfo {
                        margin: 30px 0 0 0;
                        .companyInfo-left-box{
                            > header {
                                > img {
                                    max-width: 200px;
                                }
                                > ul {
                                    margin: 0 0 0 30px;
                                    border-bottom: 1px solid #a5a3a3;
                                    > li {
                                        float: left;
                                        margin: 5px 15px 10px 0;
                                        > a {
                                            color: #e6e6e6;
                                        }
                                        > a:hover {
                                            color: #00b8ee;
                                        }
                                    }
                                }
                            }
                            > P {
                                font-size: 15px;
                                color: #e6e6e6;
                                margin: 5px 0 0 0;
                            }
                            > p:first-of-type {
                                margin: 40px 0 0 0;
                            }
                            > p:last-of-type {
                                margin: 20px 0 0 0;
                                color: #ed6c00;
                            }
                        }
                        .companyInfo-right-box{
                            color: #e6e6e6;
                            text-align: right;
                            > aside {
                                display: inline-block;
                                font-size: 16px;
                                color: #e6e6e6;
                                text-align: center;
                                margin: 0 0 0 30px;
                                > p {
                                    padding: 3px 0;
                                }
                                > img {
                                    max-width: 130px;
                                }
                            }
                        }
                    }
                }
                .copyright {
                    background-color: rgba(15, 40, 54, 0.7);
                    padding: 20px 0;
                    text-align: center;
                    > p,
                    > a {
                        color: #e6e6e6;
                    }
                }
            }
        }

    }
</style>
